<template>
  <section id="todo-list-example">
    <form v-on:submit.prevent="addNewTodo">
      <label for="new-todo">添加一个新待办事项</label>
      <input id="new-todo" placeholder="e.g. 喂猫" v-model="newTodoText">
      <button>添加</button>
    </form>
    <ul>
      <li
        is="todo-list-item"
        v-for="(item, index) in todos"
        v-bind:key="item.id"
        v-bind:title="item.title"
        v-on:remove="todos.splice(index, 1)"
      ></li>
    </ul>
  </section>
</template>

<script>
import TodoListItem from "./TodoListItem";

export default {
  name: "TodoList",
  components: { TodoListItem },
  data() {
    return {
      newTodoText: "",
      todos: [
        { id: 1, title: "洗餐具" },
        { id: 2, title: "把垃圾扔出去" },
        { id: 3, title: "给草坪割草" }
      ],
      nextTodoId: 4
    };
  },
  methods: {
    addNewTodo() {
      this.todos.push({ id: this.nextTodoId++, title: this.newTodoText });
      this.newTodoText = "";
    }
  }
};
</script>